<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>9.9元专区</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 900px; margin: 20px auto; }
    h1 { color: #ff6600; }
    .products {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    .product {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 10px;
      width: 180px;
      text-align: center;
      transition: box-shadow 0.3s ease;
    }
    .product:hover {
      box-shadow: 0 0 8px rgba(255,102,0,0.7);
    }
    .product img {
      max-width: 100%;
      border-radius: 6px;
    }
    .price {
      margin-top: 8px;
      font-weight: bold;
      color: #ff6600;
      font-size: 18px;
    }
    a.back-link {
      display: inline-block;
      margin-top: 20px;
      text-decoration: none;
      color: #ff6600;
      border: 1px solid #ff6600;
      padding: 6px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }
    a.back-link:hover {
      background-color: #ff6600;
      color: white;
    }
  </style>
</head>
<body>
<h1>测试静态数据展示</h1>
<p>超值低价精选商品，限时抢购！</p>
<div class="products">
  <div class="product">
    <img src="https://via.placeholder.com/150?text=商品1" alt="商品1" />
    <div>无线蓝牙耳机</div>
    <div class="price">¥9.9</div>
  </div>
  <div class="product">
    <img src="https://via.placeholder.com/150?text=商品2" alt="商品2" />
    <div>创意手机支架</div>
    <div class="price">¥9.9</div>
  </div>
  <div class="product">
    <img src="https://via.placeholder.com/150?text=商品3" alt="商品3" />
    <div>多功能钥匙扣</div>
    <div class="price">¥9.9</div>
  </div>
</div>
<a href="index.html" class="back-link">← 返回首页</a>
</body>
</html>
